{% extends "base.html" %}
{% block css %}
    <link rel="stylesheet" type="text/css" href="/static/css/help_login.min.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style type="text/css">
    .web-page-bg::before{background-image: url("https://ra.yourhost.com/tina/static/web/logo/yourhost_logo.png"); width: 121px; height:75px;}
    </style>
{% endblock %}

{% block content %}
<div id="award">
    <div class="web-login-page web-page-bg">
        <div class="tab-wrapper">
            <div class="login-tab-btn">

            </div>
            <div class="web-tab-wrapper">
                <div class="web-tab">
                    <div class="web-tab-nav">
                        <div class="web-tab-item active">密码登录</div>
                        <div class="web-tab-item false">短信登录/注册</div>
                    </div>
                </div>
                <div class="web-tab-content">
                    <div class="form">
                        <form method="post" action="{% url 'user_login' %}">
                        {% csrf_token %}
                        <div class="form-item">
                            <div class="phone-input__wrapper middle _uM2">
                                <div class="phone-input__input xm-input__inner no-selected middle _uM2">
                                    <div class="input-affix-wrapper _zIoe">
                                        <input name="username" autofocus required id="id_username"
                                               autocomplete="nope" class="input _zIoe" value=""
                                                                                  placeholder="请输入手机号"><span
                                            class="icon-delete hidden _zIoe"></span>
                                    </div>
                                </div>
                                <div class="phone-input__selector middle _uM2"><span
                                        class="selector-code _uM2">+86</span><i class="selector-icon _uM2"></i></div>

                            </div>
                        </div>
                        <div class="form-item">
                            <div class="input-phone no-selected">
                                <div class="input-affix-wrapper _zIoe">
                                    <input name="password" required id="id_password" type="password" autocomplete="nope"
                                                                              style="font-size:14px" class="input _zIoe"
                                                                              value="" placeholder="请输入密码"><span
                                        class="icon-delete hidden _zIoe"></span><span class="input-suffix _zIoe"><i
                                        class="xm-icon icon-eye-close" style="font-size:20px;color:#999"></i></span>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"><span style="font-size:14px;color:#F3F4F5;cursor:pointer" class="inlb fl">邮箱登录</span><a
                                class="inlb fr" style="font-size:14px;color:#F3F4F5;cursor:pointer"
                                href="#">忘记密码</a></div>
                        <button style="margin-top:24px" class="btn btn-primary block submit">登录</button>
                        <input type="hidden" name="next" value="{% url 'user_profile' %}">
                        </form>
                        {% if form.errors %}
                        <span class="error-tip">{% if form.message %}{{ form.message }}{% else %}登录账号信息错误！{% endif %}</span>
                        {% endif %}
                        <div class="clearfix">
                            <div class="remember-me fl">
                                <div class="check-box"><span class="check-box__box"><i
                                        class="xm-icon icon-fuxuankuang-weixuan"></i></span>记住我
                                </div>
                            </div>
                            <div class="download-tips fr">下载<a href="#"
                                                               class="orange-1">yourhost</a>，体验更多内容
                            </div>
                        </div>
                        <div class="third-footer _e_h">
                            <div class="title _e_h">第三方账号登录</div>
                            <div class="flex-box _e_h">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}
